<template>
  <div class="course_detail">
    <y-header :active="'kczx'" />
    <div class="detail_content">
      <div class="detail_body">
        <div class="clearfix">
          <div class="video_box">
            <div
              v-if="false"
              id="player"
              ref="videobox"
              v-video-player:myVideoPlayer="playerOptions"
              class="confVideo vjs-custom-skin video-player detail_view"
              :playsinline="true"
              customEventName="customstatechangedeventname"
            />
            <img :src="experimentInfo.logo" :alt="experimentInfo.mingcheng" class="confVideo vjs-custom-skin video-player detail_view">
          </div>
          <div class="view_info">
            <span style="font-size: 24px; line-height: 1.5" :title="experimentInfo.wangzhi">
              {{ experimentInfo.mingcheng }}
              <span class="cbox-tip">{{ experimentInfo.kechengjibie }}</span>
            </span>
            <div class="desc-tab" style="line-height: 26px;margin-bottom: 15px">
              <div class="desc-tab-container">
                <span data-position="2" class="desc-tab-item" style="font-size: 16px;">{{ teacherInfo.lecturerName }}</span>
                <span data-position="3" class="desc-tab-item" style="font-size: 16px;">{{ teacherInfo.lecturerSchool }}</span>
                <span data-position="5" class="desc-tab-item" style="font-size: 16px;">上线时间：2023年</span>
              </div>
            </div>
            <span style="font-size: 14px; line-height: 26px;margin-bottom: 20px">
              所属专业类：{{ experimentInfo.zhuanye }} &nbsp;&nbsp;
              对应专业：{{ experimentInfo.zhuanye }} &nbsp;&nbsp;
              课程类型：{{ experimentInfo.kechengleixing }} &nbsp;&nbsp;
              实验类型：{{ experimentInfo.shiyanleixing }} &nbsp;&nbsp;<br>
              所属课程：{{ experimentInfo.shiyanleixing }} &nbsp;&nbsp;
            </span>
            <span style="font-size: 14px; line-height: 22px;">{{ experimentInfo.jianjie }}</span>
          </div>
        </div>
      </div>
      <div class="detail_body2">
        <ul class="tabs clearfix">
          <a class="tab on">实验成绩</a>
        </ul>
        <list-score :appid="appid0" />
      </div>
    </div>
  </div>
</template>
<script>
import { playerOptions } from '@/pages/course/PlayerOptionss'
import YHeader from '@/components/common/Header.vue'
import ListScore from '@/components/account/ListScore.vue'
import cookies from '@/utils/cookies'
import { experimentDetail } from '@/api/course.js'
import 'assets/css/brower.css'
// import Bottom from '@/components/common/Bottom'

export default {
  components: {
    // Bottom,
    YHeader,
    ListScore
  },
  async asyncData(context) {
    console.log('context.params is ', context.params)
    const result = {}
    result.teacherInfo = {}
    result.experimentInfo = {}
    result.token = ''
    try {
      result.token = cookies.getInServerToken(context.req)
      result.experimentInfo = await experimentDetail({ id: context.params.id })
      // console.log('result.experimentInfo is ', result.experimentInfo)

      if (result.experimentInfo.lecturerResp) {
        result.teacherInfo = result.experimentInfo.lecturerResp
      }
      result.appid0 = context.params.id
    } catch (e) {
      console.error(e)
      context.error({ message: 'Data not found', statusCode: 404 })
    }

    return result
  },
  data() {
    return {
      pageObj: {},
      mobile: '',
      playerOptions: {},
      tab: 'info',
      subTab: 'info1',
      playPeriod: '', // 当前播放课时
      detailData: []
    }
  },
  head() {
    return {
      title: this.experimentInfo.mingcheng + '-' + this.$store.state.websiteInfo.websiteName
    }
  },
  mounted() {
    // this.action(this.experimentInfo.logo, this.experimentInfo.jianjieShipin, false)
  },
  methods: {
    // 加载视频
    action(logo, resourceUrl, autoplay) {
      // 设置播放器背景
      // this.$refs.watchVideo.playerOptions.poster = this.courseInfo.courseLogo
      this.playerOptions = {}
      playerOptions.sources[0] = {
        type: 'video/mp4', // 资源格式写法：'video/mp4'
        src: resourceUrl // 本地资源地址，注意：本地资源存放在public文件夹中，本文视频资源路径public/video/1.mp4
      }
      playerOptions.poster = logo
      playerOptions.autoplay = autoplay

      this.playerOptions = playerOptions
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
@import '~/assets/css/account.scss';

.detail_content {
  padding-top: 20px;
   background: #fff;
  // background-image: url('../../../images/details-header-bg.jpg');
  .detail_body {
    width: 1200px;
    margin: 0 auto;
    height: 323px;
  }

  .detail_body2 {
    width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 150px - 20px - 320px );
  }
}

.video_box {
  float: right;
  position: relative;
}

.view_info {
  width: 750px;
  margin-left: 10px;
  height: 340px;
  font-size:14px;
  font-family: Helvetica Neue For Number, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif !important;

  span {
    font-size: 14px;
    line-height: 22px;
    // color: #fff;
    word-break: break-all;
    display: block;
  }

  .cbox-tip {
    color: #fff;
    font-size: 12px;
    padding: 3px 6px;
    display: inline-block;
    vertical-align: 4px;
    margin-left: 10px;
    background: #e48238;
    background: -moz-linear-gradient(left, #e48238 0%, #e47230 11%, #d94624 100%);
    background: -webkit-linear-gradient(left, #e48238 0%, #e47230 11%, #d94624 100%);
    background: linear-gradient(to right, #e48238 0%, #e47230 11%, #d94624 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e48238', endColorstr='#d94624', GradientType=1);
    border-radius: 8px 0 8px 0;
    -webkit-border-radius: 8px 0 8px 0;
    -moz-border-radius: 8px 0 8px 0;
  }
}

.detail_view {
  float: left;
  width: 400px;
  height: 220px;
  margin-top: 20px;
  background: rgb(102, 102, 102);
  background-size: 100%;

  &.float_win {
    position: fixed;
    right: 10px;
    bottom: 30px;
    z-index: 9999;
  }
}
</style>
